import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from './vars.css';
import { GRID_CELL_PADDING } from '../components/gridBaseConfig';

export const knnoTable = style({
	display: 'table',
	width: '100%',
	tableLayout: 'fixed',
	// borderCollapse: 'collapse',
	borderSpacing: '0',
	border: 'none',
	margin: '0',
});
globalStyle(`${knnoTable} tr`, {
	height: '3em',
});

globalStyle(`${knnoTable} :is(th,td)`, {
	boxSizing: 'border-box',
	position: 'relative',
	padding: GRID_CELL_PADDING,
	lineHeight: '1.25em',
	overflow: 'hidden',
	borderRight: `1px solid ${vars.color.border}`,
	borderBottom: `1px solid ${vars.color.border}`,
	backgroundColor: vars.color.panelBackground,
});

globalStyle(`${knnoTable} tr:first-child>:is(th,td)`, {
	borderTop: `1px solid ${vars.color.border}`,
});
globalStyle(`${knnoTable} :is(th,td):first-child`, {
	borderLeft: `1px solid ${vars.color.border}`,
});
